<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .marquee {
      position: relative;
      width: 400px;
      margin: 20px auto;
      overflow: hidden;
    }
    .list {
      flex-shrink: 0;
      background: red;
    }
    .list:first-child {
      background: red;
    }
    .list:nth-child(2) {
      background: green;
    }
    .list:nth-child(3) {
      background: blue;
    }
    .content {
      display: flex;
    }
    .arrow {
      display: inline-block;
      color: #000;
      position: absolute;
      z-index: 2;
      top: 35%;
      cursor: pointer;
    }
    .arrow-left {
      left: 0;
    }
    .arrow-right {
      right: 0;
    }
  </style>
</head>
<body>
  <!-- <marquee behavior="" direction="">Deprecated</marquee> -->
  <div class="marquee">
    <div class="content">
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
    </div>
    <div class="arrow arrow-left">&lt;&lt;pre</div>
    <div class="arrow arrow-right">next&gt;&gt;</div>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(() => {
      let outerWidth = 200, 
          outerHeight = 100, 
          speed = 3, 
          initIndex = 0, 
          setTimeId = null,
          transitionTime = .3;

      let $marquee = $('.marquee');
      let $content = $marquee.find('.content');
      let $list = $content.find('.list');
      let listLength = $list.length;
      let contentWidth = outerWidth * listLength;
      
      let style = document.styleSheets
      $marquee.css({
        "width": `${outerWidth}px`,
        "height": `${outerHeight}px`
      })
      $list.css({
        "width": `${outerWidth}px`,
        "height": `${outerHeight}px`
      })
      $content.css({
        "width": `${contentWidth}px`,
        "height": `${outerHeight}px`
      })
      
      var clone = $list.eq(0).clone()
      $content.append(clone)

      function autoPlay() {
        setTimeId = setInterval(() => {
          initIndex++
          $content.css({
            "transition": `transform ${transitionTime}s ease-in`,
            "transform": `translateX(-${outerWidth * initIndex}px)`
          })
          initIndex === listLength ? initIndex = 0 : initIndex
        }, speed * 1000)
      }

      // autoPlay()

      // 监听 
      $content[0].addEventListener('transitionend', () => {
        console.log('transitionend')
        $content.css({
          "transition": `none`,
          "transform": `translateX(-${outerWidth * initIndex}px)`
        })
      })

      let $left = $('.arrow-left')
      $left.click(() => {
        // clearInterval(setTimeId)
        initIndex--
        $content.css({
          "transition": `transform ${transitionTime}s ease-in`,
          "transform": `translateX(-${outerWidth * initIndex}px)`
        })
        initIndex <= 0 ? initIndex = listLength : initIndex
      })
      $left.mouseenter(() => {
        if(initIndex <= 0) {
          initIndex = listLength
          $content.css({
            "transition": `none`,
            "transform": `translateX(-${outerWidth * initIndex}px)`
          })
        }
      })

      let $right = $('.arrow-right')
      $right.click(() => {
        // clearInterval(setTimeId)
        initIndex++
        $content.css({
          "transition": `transform ${transitionTime}s ease-in`,
          "transform": `translateX(-${outerWidth * initIndex}px)`
        })
        initIndex === listLength ? initIndex = 0 : initIndex
      })
      $right.mouseenter(() => {
        if(initIndex === listLength) {
          initIndex = 0
          $content.css({
          "transition": `none`,
          "transform": `translateX(-${outerWidth * initIndex}px)`
        })
        }
      })
    })
  </script>
</body>
</html>